<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>
  <div id="container" class="panels">
    <header class="panel p-north">
	<div class="panel-header"><h1>Wings: Learn PHP</h1></div>
	<div class="panel-content">
		<h2><img alt="Wings" src="./img/wings-logo-special-small.png" height="45" /> PHP </h2>
	</div>
    </header>
    <div id="main" role="main">
	<div class="panel p-east">
		<div class="panel-header"><h2>PHP Tutorial</h2></div>
		<div class="panel-content">
			<div id="videoContainer">
				<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
			</div>
			<ul id="videoPlaylist">
				<li><a href="#9iUvuaChDEg">Lesson 1: Introduction</a></li>
				<li><a href="#4XpnKHJAok8">Lesson 2: Git</a></li>
				<li><a href="#jo_B4LTHi3I">Lesson 3: Node.js</a></li>
				<li><a href="#i_qE1iAmjFg">Lesson 4: 10 jQuery</a></li>
				<li><a href="#hDLcOOoO61U">Lesson 5: Tmux</a></li>
			</ul>
			<!-- Video Debug -->
			<div id="videoInfo">
				<p>Player state: <span id="playerState">-</span></p>
    				<p>Current Time: <span id="videoCurrentTime">-</span> | Duration: <span id="videoDuration">-</span></p>
				<p>Bytes Total: <span id="bytesTotal">-</span> | Start Bytes: <span id="startBytes">-</span> | Bytes Loaded: <span id="bytesLoaded">-</span></p>
  			</div>
			<!-- Video Debug -->
			<div id="projectDonations">
			<!-- Please Donate -->
				<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
					<input type="hidden" name="cmd" value="_s-xclick">
					<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
					<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
					<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
				</form>

			<!-- Please Donate -->
			</div>
		</div>
	</div>
	<div class="panel p-west">
		<div class="panel-header"><h2>Author</h2></div>
		<div class="panel-content">
			<ul id="authorDetail">
				<li class="diff"><img src="./img/crisboot.jpg" alt="author image"/></li>
				<li class="headTitle"><h3>About <a class="mod-tweet-link" href="http://twitter.com/cortezcristian" target="_blank">@cortezcristian</a></h3></li>
				<li>
					<p>Crisboot the author of Wings platform, created this PHP tutorial as a test to expose what he thinks will be a new way of learning.</p>
					<p>He believes programmers diserves a better solution for documenting and sharing knowledge in a more natural way.</p>
					<p>There's nothing better to stay next to the person, see him/her typing and listen carefully.</p>
					<p>Remember everybody has their own Wings, and I need more friends with Wings... Enjoy ;)</p>
				</li>
			</ul>
		</div>	
	</div>
	<div class="panel p-center">
		<div class="panel-header"><h2>Course</h2></div>
		<div class="panel-content">
			<div class="tabs">
				<div class="tab-ctrl tab-ctrl-left"><a href="#">&nbsp;</a></div>
				<div class="tab-ctrl tab-ctrl-right"><a href="#">&nbsp;</a></div>
				<div class="tabs-show">
					<ul class="tabs-list">
						<li>
							<span>
								<a href="#panel1" class="tab-tittle">
									<img src="./img/editor-ico.png" alt="Browser" height="18" width="16" />
									<em>Editor</em>
								</a>
								<a href="#panel1" class="tab-close"></a>
							</span>
						<span class="tab-end"></span>
						</li>
						<li>
							<span>
								<a href="#panel2" class="tab-tittle">
									<img src="./img/browser-ico.png" alt="Browser" height="18" width="16" />
									<em>Browser</em>
								</a>
								<a href="#panel2" class="tab-close"></a>
							</span>
							<span class="tab-end"></span>
						</li>
					</ul>
				</div>
				<div class="tabs-panels">
					<div id="panel1" class="tab-panel-content">
						<div id="editor"></div>
					</div>
					<div id="panel2" class="tab-panel-content browser">
						<ul class="browser-nav-bar">
							<li><a class="browser-prev-btn" href="#"><img src="./img/browser-prev-btn.png" alt="Browser" height="32" width="32" /></a></li>
							<li><a class="browser-next-btn" href="#"><img src="./img/browser-next-btn.png" alt="Browser" height="32" width="32" /></a></li>
							<li><a class="browser-refresh-btn" href="#"><img src="./img/browser-refresh-btn.png" alt="Browser" height="32" width="32" /></a></li>
							<li><input type="text" class="browser-url" name="browser-url" value="http://localhost/"></li>
							<li><a class="browser-go-btn" href="#"><img src="./img/browser-go-btn.png" alt="Browser" height="32" width="32" /></a></li>
						</ul>
						<iframe class="browser-page-container" src="./browser/index.html" frameborder="0" align="center" scrolling="no" allowtransparency="false"></iframe>
					</div>
				</div>
			 </div>
		</div>
	</div>
    </div>
    <footer class="panel p-south mod-console">
	<div class="panel-header hdr"><h2>crisboot@cortezcristian: ~$</h2></div>
	<div class="panel-content bdy">
			<div class="content">
			</div>
	</div>
    </footer>
  </div> <!--! end of #container -->
  <div id="socialShare">
	<!-- AddThis Button BEGIN -->
	<div class="addthis_toolbox addthis_default_style ">
	<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
	<a class="addthis_button_tweet"></a>
	<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
	<a class="addthis_counter addthis_pill_style"></a>
	</div>
	<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e6ebdbc07db1bc3"></script>
	<!-- AddThis Button END -->
  </div>

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
  <script type="text/javascript" src="js/libs/swfobject.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/jquery.jconsole.js"></script>
  <script defer src="js/plugins.js"></script>
  <!-- end scripts-->
<script src="js/libs/ace/ace.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/libs/ace/theme-twilight.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/libs/ace/mode-javascript.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/mylibs/wings.php-tutorial.js" type="text/javascript" charset="utf-8"></script> 

	
  <!-- Change UA-XXXXX-X to be your site's ID 
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>
	-->

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
</body>
</html>
